1 00:00:00,952 --> 00:00:03,311 Acum este timpul să începem planificarea 2 00:00:03,311 --> 00:00:05,141 marele nostru proiect de curs, 3 00:00:05,141 --> 00:00:08,920 pe baza pașilor despre care tocmai am învățat. 4 00:00:08,920 --> 00:00:13,920 Așadar, permiteți-mi să încep prin a vă prezenta „Omnifood”. 5 00:00:14,490 --> 00:00:18,121 Deci, Omnifood este un startup fictiv pe care l-am inventat 6 00:00:18,121 --> 00:00:20,420 doar pentru acest curs. 7 00:00:20,420 --> 00:00:25,210 Și ceea ce fac ei este să folosească AI pentru a crea și a livra 8 00:00:25,210 --> 00:00:28,181 planuri de masă sănătoase personalizate. Dar chiar acum, 9 00:00:28,181 --> 00:00:31,160 înainte de a-și putea lansa efectiv produsul, 10 00:00:31,160 --> 00:00:36,160 au nevoie de un site web nou, frumos, modern și curat. 11 00:00:36,440 --> 00:00:38,550 Deci, un site care îi va face să arate 12 00:00:38,550 --> 00:00:42,080 ca o companie profesionistă și de încredere. 13 00:00:42,080 --> 00:00:44,640 Și așa, acolo intrăm noi, 14 00:00:44,640 --> 00:00:47,320 pentru că exact asta vom face. 15 00:00:47,320 --> 00:00:49,560 Așa că împreună, ne vom preface 16 00:00:49,560 --> 00:00:53,361 pe care am fost angajați de Omnifood să proiectăm și să construim 17 00:00:53,361 --> 00:00:58,361 site-ul lor de marketing folosind HTML și CSS. 18 00:00:58,380 --> 00:01:01,630 Deci, acesta va fi un proiect în lumea reală, 19 00:01:01,630 --> 00:01:05,380 unde vom folosi toate abilitățile pe care le-am învățat deja 20 00:01:05,380 --> 00:01:07,340 și chiar mult mai mult. 21 00:01:07,340 --> 00:01:09,540 Deci, acest proiect va fi ca 22 00:01:09,540 --> 00:01:12,810 primul tău loc de muncă, construirea de site-uri web. 23 00:01:12,810 --> 00:01:15,890 Și asta e foarte, foarte tare, cred. 24 00:01:15,890 --> 00:01:18,401 Va fi atât de distractiv să te prefaci 25 00:01:18,401 --> 00:01:22,452 că de fapt lucrăm pentru o companie adevărată, nu? 26 00:01:22,452 --> 00:01:26,750 Deci, sper că sunteți la fel de încântați ca și mine de acest proiect. 27 00:01:26,750 --> 00:01:30,660 Cred că aceasta este o idee și o provocare foarte grozavă, 28 00:01:30,660 --> 00:01:34,070 și, desigur, oportunitate de învățare, de asemenea. 29 00:01:34,070 --> 00:01:35,750 Acum, Omnifood ne oferă 30 00:01:35,750 --> 00:01:39,090 cu tot conținutul pentru site, desigur. 31 00:01:39,090 --> 00:01:42,362 Și așa, pentru a ne pregăti acum pentru slujba noastră, 32 00:01:42,362 --> 00:01:45,283 să aruncăm o privire rapidă la acel conținut. 33 00:01:47,000 --> 00:01:49,350 Și, ca întotdeauna, acel conținut 34 00:01:49,350 --> 00:01:52,083 se află în fișierele de pornire pentru această secțiune. 35 00:01:52,980 --> 00:01:56,940 Deci, să venim din nou aici la folderul nostru de pornire. 36 00:01:56,940 --> 00:02:00,800 Și apoi, aici, în interiorul acesteia, este aceasta. 37 00:02:00,800 --> 00:02:04,044 Deci, Omnifood-Desktop șapte. 38 00:02:04,044 --> 00:02:07,030 Și aici, tot ce avem este acest conținut. 39 00:02:07,030 --> 00:02:08,400 Deci din nou, ce voi face 40 00:02:08,400 --> 00:02:10,399 este să copiați acest folder aici 41 00:02:10,399 --> 00:02:13,420 și lipiți-l chiar aici. 42 00:02:13,420 --> 00:02:16,460 Deci, „07-Omnifood-Desktop”. 43 00:02:16,460 --> 00:02:18,630 Acum, în cazul tău, probabil că este suficient 44 00:02:18,630 --> 00:02:20,530 pentru a numi acest lucru pur și simplu „Omnifood”, 45 00:02:20,530 --> 00:02:22,910 și apoi, veți lucra pur și simplu în acest folder 46 00:02:22,910 --> 00:02:25,340 până la sfârșitul cursului. 47 00:02:25,340 --> 00:02:27,470 Aici, în cazul meu, l-am împărțit 48 00:02:27,470 --> 00:02:29,270 în mai multe foldere 49 00:02:29,270 --> 00:02:33,570 deoarece vom avea mai multe secțiuni în acest proiect. 50 00:02:33,570 --> 00:02:36,963 Dar din nou, ar trebui să o faci așa. 51 00:02:38,321 --> 00:02:40,520 Apoi, să creăm o nouă fereastră aici 52 00:02:40,520 --> 00:02:44,630 și apoi, voi deschide acel folder chiar aici. 53 00:02:44,630 --> 00:02:47,920 Și așa, acesta va fi folderul nostru de proiect 54 00:02:47,920 --> 00:02:49,713 pentru acest proiect. 55 00:02:52,840 --> 00:02:53,873 Bine. 56 00:02:54,730 --> 00:02:56,673 Acesta este ceva nou aici în codul VS. 57 00:02:58,200 --> 00:02:59,750 Deci, faceți clic pe „da” acolo 58 00:03:01,010 --> 00:03:02,710 and okay. 59 00:03:02,710 --> 00:03:05,950 Deci, tot ce avem aici este acest folder cu conținutul 60 00:03:05,950 --> 00:03:08,640 și apoi, acolo, avem acest folder de imagini, 61 00:03:08,640 --> 00:03:10,440 care are toate imaginile 62 00:03:10,440 --> 00:03:13,090 și chiar mai multe foldere cu imagini. 63 00:03:13,090 --> 00:03:14,720 Și apoi, și mai important, 64 00:03:14,720 --> 00:03:19,720 avem acest conținut.md și „md” înseamnă markdown, 65 00:03:19,920 --> 00:03:22,010 care este un format de text special 66 00:03:22,010 --> 00:03:24,383 pe care le folosim de multe ori în dezvoltare. 67 00:03:25,570 --> 00:03:27,200 Deci, repede despre asta. 68 00:03:27,200 --> 00:03:30,740 Practic, în markup, având un hash ca acesta 69 00:03:30,740 --> 00:03:32,540 este pentru titlul principal, 70 00:03:32,540 --> 00:03:35,510 apoi două hashuri sunt pentru titlul secundar 71 00:03:35,510 --> 00:03:37,410 și așa mai departe și așa mai departe. 72 00:03:37,410 --> 00:03:39,330 Deci, aici avem al treilea. 73 00:03:39,330 --> 00:03:41,510 Deci, aceasta este o rubrică terțiară. 74 00:03:41,510 --> 00:03:43,633 Deci, este un pic ca H1, H2, 75 00:03:43,633 --> 00:03:46,723 până la H6, în HTML. 76 00:03:47,840 --> 00:03:50,810 Dar oricum, aici avem o scurtă descriere 77 00:03:50,810 --> 00:03:53,760 despre Omnifood chiar aici. 78 00:03:53,760 --> 00:03:55,300 Apoi, avem niște branding. 79 00:03:55,300 --> 00:03:58,373 Deci, lucruri precum titlul și culoarea mărcii. 80 00:03:59,220 --> 00:04:02,050 Deci, după cum vedeți, cel puțin decizia de proiectare 81 00:04:02,050 --> 00:04:05,680 despre culoarea ne-a fost deja luată, 82 00:04:05,680 --> 00:04:07,520 ceea ce este foarte frumos. 83 00:04:07,520 --> 00:04:11,030 Deci, acest lucru este util pentru a avea deja culoarea mărcii. 84 00:04:11,030 --> 00:04:14,180 Și apoi aici, ei ne oferă conținutul real 85 00:04:14,180 --> 00:04:15,273 pentru site-ul web. 86 00:04:16,140 --> 00:04:18,620 Deci, avem un rezumat și avem aici, 87 00:04:18,620 --> 00:04:20,863 tot acest conținut de care vom avea nevoie. 88 00:04:21,820 --> 00:04:23,070 Bine. 89 00:04:23,070 --> 00:04:25,660 Și acum, vreau doar să vă rog să vă rog 90 00:04:25,660 --> 00:04:27,520 întrerupeți videoclipul în acest moment 91 00:04:27,520 --> 00:04:29,910 și citește tot acest conținut aici. 92 00:04:29,910 --> 00:04:32,970 Așa că atunci când începem construirea proiectului, 93 00:04:32,970 --> 00:04:35,040 suntem cu toții pe aceeași pagină. 94 00:04:35,040 --> 00:04:38,490 Și de fapt, cel mai important lucru aici este acesta. 95 00:04:38,490 --> 00:04:39,840 Deci, această descriere. 96 00:04:39,840 --> 00:04:41,660 Pentru că acesta, chiar vom avea nevoie 97 00:04:41,660 --> 00:04:44,280 pentru restul acestei prelegeri. 98 00:04:44,280 --> 00:04:45,113 Bine. 99 00:04:45,113 --> 00:04:49,000 Deci, vă rugăm să întrerupeți videoclipul aici și să citiți această descriere. 100 00:04:49,000 --> 00:04:50,800 Și dacă ai chef, 101 00:04:50,800 --> 00:04:52,180 ar fi si mai bine 102 00:04:52,180 --> 00:04:54,183 pentru a citi întregul conținut aici. 103 00:04:56,630 --> 00:04:57,570 În regulă. 104 00:04:57,570 --> 00:04:59,840 Deci acum, pe baza acestui conținut 105 00:04:59,840 --> 00:05:02,200 și pe descrierea Omnifood, 106 00:05:02,200 --> 00:05:05,453 să începem de fapt să ne planificăm proiectul. 107 00:05:06,810 --> 00:05:09,930 Deci, ceea ce vom face acum este să ne ocupăm de pasul unu 108 00:05:09,930 --> 00:05:14,030 și pasul doi din cei șapte pași din spatele unui site web grozav 109 00:05:14,030 --> 00:05:16,560 pe care le-am învățat în prelegerea anterioară. 110 00:05:16,560 --> 00:05:20,340 Deci, cu alte cuvinte, vom defini și planifica proiectul 111 00:05:20,340 --> 00:05:22,080 un pic aici acum. 112 00:05:22,080 --> 00:05:24,860 Și începând cu definirea proiectului, 113 00:05:24,860 --> 00:05:25,780 amintiți-vă că aici, 114 00:05:25,780 --> 00:05:29,502 trebuie să definim pentru cine este site-ul web, pentru ce este, 115 00:05:29,502 --> 00:05:34,502 și, de asemenea, să stabilim practic publicul nostru țintă. 116 00:05:34,520 --> 00:05:36,850 Deci, primul este foarte ușor. 117 00:05:36,850 --> 00:05:40,350 În acest caz, acest proiect este pentru un client. 118 00:05:40,350 --> 00:05:43,430 Deci, compania Omnifood în acest caz. 119 00:05:43,430 --> 00:05:46,080 În continuare, definiți pentru ce este site-ul web 120 00:05:46,080 --> 00:05:50,050 este, practic, definirea scopului utilizatorului și a scopului de afaceri. 121 00:05:50,050 --> 00:05:51,220 Îți amintești? 122 00:05:51,220 --> 00:05:52,300 Și pentru a face asta, 123 00:05:52,300 --> 00:05:54,910 putem arunca o altă privire asupra conținutului 124 00:05:54,910 --> 00:05:57,210 pe care ne-a oferit-o Omnifood 125 00:05:57,210 --> 00:05:59,900 și pe care tocmai l-am citit anterior. 126 00:05:59,900 --> 00:06:02,320 Deci, pe baza descrierii acestei companii, 127 00:06:02,320 --> 00:06:05,370 putem oarecum deduce că scopul afacerii 128 00:06:05,370 --> 00:06:07,901 is to sell a monthly food subscription 129 00:06:07,901 --> 00:06:10,220 and that the goal of the users 130 00:06:10,220 --> 00:06:13,020 is to basically eat well, effortlessly, 131 00:06:13,020 --> 00:06:16,600 but without spending a lot of time and money. 132 00:06:16,600 --> 00:06:18,160 Now, of course, you could have used 133 00:06:18,160 --> 00:06:20,420 a completely different wording here, 134 00:06:20,420 --> 00:06:23,520 but the intention is basically this. 135 00:06:23,520 --> 00:06:27,160 So, the business wants to sell the food subscription 136 00:06:27,160 --> 00:06:31,960 iar utilizatorul vrea să mănânce bine și să mănânce sănătos, nu? 137 00:06:31,960 --> 00:06:34,920 Deci, practic, pentru asta va fi acest site web, 138 00:06:34,920 --> 00:06:37,830 matching the business goal with the user goal. 139 00:06:37,830 --> 00:06:40,500 Și așa, desigur, așa cum am aflat deja, 140 00:06:40,500 --> 00:06:44,110 trebuie să ținem cont de acest lucru când ne proiectăm pagina. 141 00:06:44,110 --> 00:06:47,540 Și factorul uriaș în asta este, desigur, și conținutul, 142 00:06:47,540 --> 00:06:50,160 dar asta e deja scris, nu? 143 00:06:50,160 --> 00:06:51,600 Deci, asta ușurează. 144 00:06:51,600 --> 00:06:54,330 Dar dacă trebuie să scrii conținutul pe cont propriu, 145 00:06:54,330 --> 00:06:58,070 atunci, acest aspect este de fapt și mai important. 146 00:06:58,070 --> 00:07:01,550 Deci, scrieți conținutul exact astfel încât, în cele din urmă, 147 00:07:01,550 --> 00:07:04,830 avem ca obiectivul de afaceri să îndeplinească obiectivul utilizatorului. 148 00:07:04,830 --> 00:07:07,420 Acum, în sfârșit, despre publicul țintă. 149 00:07:07,420 --> 00:07:10,550 Nu vom reuși să o facem cu adevărat specific, 150 00:07:10,550 --> 00:07:14,450 ca în acel exemplu pe care ți l-am arătat în ultimul videoclip, 151 00:07:14,450 --> 00:07:16,682 dar putem lua câteva indicii aici. 152 00:07:16,682 --> 00:07:19,310 Deci, limba din această descriere 153 00:07:19,310 --> 00:07:22,760 este un fel de tehnic și geek. 154 00:07:22,760 --> 00:07:26,941 Deci, cu lucruri precum algoritmul AI și abordarea centrată pe AI, 155 00:07:26,941 --> 00:07:30,200 și, de asemenea, ei înșiși spun asta 156 00:07:30,200 --> 00:07:32,690 ei sunt în primul rând o companie de tehnologie. 157 00:07:32,690 --> 00:07:35,520 Și așa, cred că este sigur să spun că acest produs 158 00:07:35,520 --> 00:07:39,980 se adresează în principal oamenilor pasionați de tehnologie. 159 00:07:39,980 --> 00:07:43,750 Așadar, puțin în chestii geek ca acestea. 160 00:07:43,750 --> 00:07:45,910 De asemenea, putem citi din descriere 161 00:07:45,910 --> 00:07:48,680 că asta este un fel de oameni ocupați 162 00:07:48,680 --> 00:07:51,330 și, de asemenea, pentru cei care sunt interesați 163 00:07:51,330 --> 00:07:53,820 in sanatatea lor, nu? 164 00:07:53,820 --> 00:07:57,190 Acum, deoarece vor trebui să plătească pentru un abonament lunar, 165 00:07:57,190 --> 00:07:59,770 care probabil nu este atât de ieftin, 166 00:07:59,770 --> 00:08:02,970 de asemenea, vor trebui să aibă un loc de muncă bine plătit. 167 00:08:02,970 --> 00:08:06,160 Și astfel, până la urmă, ajungem cu acest public țintă 168 00:08:06,160 --> 00:08:08,780 de oameni ocupați cărora le place tehnologia, 169 00:08:08,780 --> 00:08:10,560 sunt interesați de o dietă sănătoasă 170 00:08:10,560 --> 00:08:12,480 și să aibă un loc de muncă bine plătit. 171 00:08:12,480 --> 00:08:14,940 Și încă o dată, acest lucru este și mai important 172 00:08:14,940 --> 00:08:18,260 pentru atunci când chiar scrii conținutul pe cont propriu. 173 00:08:18,260 --> 00:08:20,840 Dar totuși, este bine de știut că site-ul 174 00:08:20,840 --> 00:08:23,980 va fi construit pentru oameni ca acesta. 175 00:08:23,980 --> 00:08:25,600 Acum, desigur, asta nu înseamnă 176 00:08:25,600 --> 00:08:27,250 că nu vor fi utilizatori 177 00:08:27,250 --> 00:08:29,560 care nu se potrivesc acestei descrieri, 178 00:08:29,560 --> 00:08:31,950 dar, în general, sunt oameni ca asta 179 00:08:31,950 --> 00:08:34,860 pentru care vom construi acest site web. 180 00:08:34,860 --> 00:08:36,120 În regulă. 181 00:08:36,120 --> 00:08:40,390 Deci, asta înseamnă, practic, definirea proiectului în termeni largi. 182 00:08:40,390 --> 00:08:43,530 Deci, să trecem acum la pasul numărul doi. 183 00:08:43,530 --> 00:08:47,030 Deci, pasul numărul doi, amintiți-vă, presupune planificare 184 00:08:47,030 --> 00:08:49,430 și colectarea conținutului site-ului 185 00:08:49,430 --> 00:08:52,070 iar asta a fost deja făcută. 186 00:08:52,070 --> 00:08:54,290 Deci, e foarte frumos. 187 00:08:54,290 --> 00:08:57,620 Apoi, al doilea este să planificați harta site-ului, 188 00:08:57,620 --> 00:08:59,900 ceea ce, în acest caz, nu este necesar 189 00:08:59,900 --> 00:09:03,891 pentru că pur și simplu vom construi un site de marketing de o singură pagină 190 00:09:03,891 --> 00:09:05,890 pentru Omnifood. 191 00:09:05,890 --> 00:09:08,000 Deci, aici nu este necesară nicio hartă de site 192 00:09:08,000 --> 00:09:10,540 pentru că avem doar o pagină. 193 00:09:10,540 --> 00:09:13,000 Și de multe ori, o pagină ca aceasta 194 00:09:13,000 --> 00:09:16,961 cu doar, practic, o singură pagină se numește pagină de destinație. 195 00:09:16,961 --> 00:09:21,510 În continuare, trebuie să ne gândim la personalitatea site-ului. 196 00:09:21,510 --> 00:09:24,160 Și aici, încă o dată, putem lua câteva indicii 197 00:09:24,160 --> 00:09:27,900 din descrierea Omnifood care ni s-a oferit. 198 00:09:27,900 --> 00:09:31,200 Așa că aici, în primul paragraf, ei spun imediat 199 00:09:31,200 --> 00:09:33,930 că sunt în primul rând o companie de tehnologie, 200 00:09:33,930 --> 00:09:38,390 dar că se concentrează și pe bunăstarea utilizatorilor lor. 201 00:09:38,390 --> 00:09:39,490 Corect? 202 00:09:39,490 --> 00:09:42,620 Acum, în pasul anterior, am definit și noi deja 203 00:09:42,620 --> 00:09:44,570 că căutăm, cam 204 00:09:44,570 --> 00:09:47,130 pentru un public țintă centrat pe tehnologie. 205 00:09:47,130 --> 00:09:50,610 Și, prin urmare, are un fel de sens, cred, 206 00:09:50,610 --> 00:09:54,322 că vom folosi personalitatea start-up și optimistă. 207 00:09:54,322 --> 00:09:57,740 Acum, din cauza acelei importanțe care se acordă 208 00:09:57,740 --> 00:10:01,080 despre bunăstarea consumatorului, putem adăuga și câteva elemente 209 00:10:01,080 --> 00:10:03,910 a personalității calme și pașnice. 210 00:10:03,910 --> 00:10:06,260 Deci, aici este un pic în care această personalitate 211 00:10:06,260 --> 00:10:08,000 de obicei se concentrează. 212 00:10:08,000 --> 00:10:11,590 Și așa, cred că ar putea fi frumos să adăugați câteva elemente de design 213 00:10:11,590 --> 00:10:13,760 și a acelei personalități. 214 00:10:13,760 --> 00:10:17,020 Dar, în general, cred că vom folosi în principal start-up-ul 215 00:10:17,020 --> 00:10:19,931 și personalitate optimistă pentru că, ei bine, 216 00:10:19,931 --> 00:10:23,600 acesta este, de fapt, un startup. Bine? 217 00:10:23,600 --> 00:10:27,860 Și acum, tot ce trebuie să facem este să planificăm secțiunile paginii. 218 00:10:27,860 --> 00:10:29,300 Și așa, pentru a face asta, 219 00:10:29,300 --> 00:10:31,810 să revenim de fapt la conținutul nostru 220 00:10:31,810 --> 00:10:35,140 pentru că nu uitați că ar trebui să facem întotdeauna această planificare 221 00:10:35,140 --> 00:10:37,170 pe baza continutului. 222 00:10:37,170 --> 00:10:40,370 So, not to do a pretty design without the content, 223 00:10:40,370 --> 00:10:43,460 și apoi pur și simplu umpleți-l cu conținut. 224 00:10:43,460 --> 00:10:46,071 Dar, în schimb, vom avea conținutul nostru, 225 00:10:46,071 --> 00:10:50,753 ghidează practic proiectarea și planificarea tronsoanelor. 226 00:10:52,740 --> 00:10:56,690 Bine. Deci, să verificăm aici conținutul site-ului. 227 00:10:56,690 --> 00:10:59,270 Și, de fapt, aceasta este deja puțin divizată 228 00:10:59,270 --> 00:11:03,350 în secțiuni, totuși, putem face mai bine. 229 00:11:03,350 --> 00:11:06,140 Deci, acest conținut pe care ni l-au oferit 230 00:11:06,140 --> 00:11:11,069 nu este încă în cele din urmă împărțit în secțiuni logice ale site-ului web. 231 00:11:11,069 --> 00:11:15,960 Dar oricum, aici avem un rezumat și, de asemenea, aici sus, 232 00:11:15,960 --> 00:11:18,500 acest titlu. Și așa ar trebui probabil să meargă 233 00:11:18,500 --> 00:11:21,580 într-un fel de antet, nu? 234 00:11:21,580 --> 00:11:24,313 Deci, într-o „secțiune de eroi”, așa cum ne place să o numim. 235 00:11:25,750 --> 00:11:27,700 Apoi, avem aici aceste caracteristici. 236 00:11:27,700 --> 00:11:30,282 Avem cum funcționează Omnifood, 237 00:11:30,282 --> 00:11:33,344 apoi, avem câteva mese și această listă, 238 00:11:33,344 --> 00:11:36,304 dar să mergem de fapt aici până la capăt 239 00:11:36,304 --> 00:11:40,533 unde voi crea o listă a secțiunilor. 240 00:11:42,580 --> 00:11:44,850 Doar niște separare acolo. 241 00:11:44,850 --> 00:11:47,053 Și apoi aici, folosesc practic un H2, 242 00:11:47,970 --> 00:11:49,017 deci, „Secțiuni”. 243 00:11:50,560 --> 00:11:53,821 Deci, aceste liniuțe de aici sunt practic ca punctele marcatoare. 244 00:11:53,821 --> 00:11:55,820 Deci, să le folosim. 245 00:11:55,820 --> 00:12:00,333 Și amintiți-vă, vom începe cu o secțiune „Erou”. 246 00:12:01,380 --> 00:12:05,010 Deci, deocamdată, să adunăm pur și simplu, practic, toate secțiunile 247 00:12:05,010 --> 00:12:07,160 pe care le ai aici. Și apoi, îi vom grupa 248 00:12:07,160 --> 00:12:09,993 în secțiuni mai logice pentru pagina noastră. 249 00:12:11,040 --> 00:12:12,380 Deci aici, ei vor o secțiune 250 00:12:12,380 --> 00:12:15,203 cu sigle ale publicațiilor prezentate. 251 00:12:17,180 --> 00:12:20,920 Deci, aici, au câteva imagini despre asta. 252 00:12:20,920 --> 00:12:24,320 De exemplu, Forbes sau TechCrunch. 253 00:12:24,320 --> 00:12:27,260 Și amintiți-vă că acesta este ceva despre care am vorbit 254 00:12:27,260 --> 00:12:30,750 în prelegerea componentelor. Corect? 255 00:12:30,750 --> 00:12:32,570 Dar oricum, sunt multe lucruri aici, 256 00:12:32,570 --> 00:12:35,450 dar să începem de la vârf. 257 00:12:35,450 --> 00:12:38,611 Deci, aici, avem caracteristicile, apoi cum funcționează. 258 00:12:38,611 --> 00:12:41,733 Bine. Deci, să adăugăm asta. 259 00:12:42,910 --> 00:12:45,460 Să nu folosim tot timpul cuvântul „secțiune” aici. 260 00:12:46,740 --> 00:12:47,887 Deci, „Caracteristici”, 261 00:12:50,527 --> 00:12:51,883 „Cum funcționează”... 262 00:12:53,610 --> 00:12:55,203 Să vedem ce mai au. 263 00:12:56,200 --> 00:12:59,430 Apoi, avem practic „diete”. 264 00:12:59,430 --> 00:13:00,887 și „probă de mese”, 265 00:13:02,360 --> 00:13:06,320 și mai spun că oferă o masă gratuită. 266 00:13:06,320 --> 00:13:10,190 Deci, aici, ei doresc un formular simplu pentru ca utilizatorii să se înscrie. 267 00:13:10,190 --> 00:13:12,350 Deci, putem spune că așa este 268 00:13:12,350 --> 00:13:15,110 secțiunea noastră „îndemn la acțiune”, nu? 269 00:13:15,110 --> 00:13:16,450 Și din nou, acesta este ceva 270 00:13:16,450 --> 00:13:19,200 despre care am vorbit deja pe larg, 271 00:13:19,200 --> 00:13:23,830 Cred că, în secțiunea de componente sau în secțiunea de layout. 272 00:13:23,830 --> 00:13:25,430 Sau, de fapt, prelegeri. 273 00:13:25,430 --> 00:13:28,800 Deci, poți să te întorci acolo pentru inspirație, ca întotdeauna, 274 00:13:28,800 --> 00:13:31,800 și, de asemenea, să vezi despre ce este vorba. 275 00:13:31,800 --> 00:13:34,700 Deci, din nou, avem dietele, mesele eșantion, 276 00:13:34,700 --> 00:13:36,803 și acesta este chemarea noastră la acțiune, atunci. 277 00:13:39,610 --> 00:13:40,867 Deci, „diete”, 278 00:13:43,550 --> 00:13:46,073 mese, să-i spunem de fapt „Meals”. 279 00:13:47,070 --> 00:13:50,620 Pentru că cred că, practic, arată niște date 280 00:13:50,620 --> 00:13:52,300 vreo două mese acolo. 281 00:13:52,300 --> 00:13:53,850 Și apoi, „chemarea noastră la acțiune”. 282 00:13:56,350 --> 00:13:57,263 Corect? 283 00:14:00,130 --> 00:14:03,130 Da. Deci au aceste două mese și diete, 284 00:14:03,130 --> 00:14:04,871 chemarea la acțiune. Apoi avem prețul, 285 00:14:04,871 --> 00:14:08,653 o galerie foto și mărturii. 286 00:14:10,410 --> 00:14:11,840 Bine. 287 00:14:11,840 --> 00:14:13,923 Deci, prețuri, galerie și mărturii. 288 00:14:21,850 --> 00:14:23,190 În regulă. 289 00:14:23,190 --> 00:14:25,010 Și, desigur, puteți face această planificare 290 00:14:25,010 --> 00:14:28,550 în alt software, sau chiar cu creion și hârtie, 291 00:14:28,550 --> 00:14:30,490 care este modul în care îmi place să o fac. 292 00:14:30,490 --> 00:14:33,710 Dar atunci nu prea ai putut să vezi ce scriu. 293 00:14:33,710 --> 00:14:35,280 Corect. 294 00:14:35,280 --> 00:14:37,050 Bine. 295 00:14:37,050 --> 00:14:41,470 Apoi, aici, au acea secțiune „publicații recomandate”. 296 00:14:41,470 --> 00:14:44,120 Așa că pe acesta, îmi place să îl numesc „prezentat în”, 297 00:14:44,120 --> 00:14:48,500 și apoi, câteva „informații de contact” și „linkuri suplimentare”. 298 00:14:48,500 --> 00:14:51,500 Și deci acesta este de obicei genul de informații 299 00:14:51,500 --> 00:14:54,070 care intră în subsolul site-ului. 300 00:14:54,070 --> 00:14:56,070 Deci, din nou, asta e ceva ce ți-am arătat 301 00:14:56,070 --> 00:14:57,730 într-una din aceste prelegeri 302 00:14:57,730 --> 00:15:00,578 care erau despre componente și machete. 303 00:15:00,578 --> 00:15:03,663 Deci, „prezentat în” și apoi un subsol. 304 00:15:05,190 --> 00:15:06,023 Bine. 305 00:15:07,437 --> 00:15:09,303 „Prezentat în” 306 00:15:13,520 --> 00:15:14,353 și un „subsol” 307 00:15:14,353 --> 00:15:16,910 chiar în vârf. 308 00:15:16,910 --> 00:15:18,160 Bine. 309 00:15:18,160 --> 00:15:19,640 Acum, de obicei înainte de „Eroul”, 310 00:15:19,640 --> 00:15:21,713 vrem si putina navigatie. 311 00:15:23,500 --> 00:15:27,290 Acum, chiar dacă această pagină este doar un site cu o singură pagină, 312 00:15:27,290 --> 00:15:29,590 deci o pagină de destinație, amintiți-vă, 313 00:15:29,590 --> 00:15:32,070 mai vrem un fel de navigație 314 00:15:32,070 --> 00:15:35,530 pentru că poate fi util să aveți câteva link-uri în partea de sus, 315 00:15:35,530 --> 00:15:39,570 care va conduce utilizatorul către diferite secțiuni ale paginii. 316 00:15:39,570 --> 00:15:42,860 Și asta este util pentru că fiecare dintre aceste secțiuni 317 00:15:42,860 --> 00:15:47,590 va fi oarecum o mini-pagină. Deci, pe vremuri, de fapt, 318 00:15:47,590 --> 00:15:50,880 site-urile web au fost făcute așa, unde fiecare pagină 319 00:15:50,880 --> 00:15:54,230 avea doar foarte puțin conținut, și apoi fiecare dintre acestea aici 320 00:15:54,230 --> 00:15:57,010 ar putea fi de fapt propria ei pagină. 321 00:15:57,010 --> 00:15:58,690 Dar acum, în design modern, 322 00:15:58,690 --> 00:16:02,160 și mai ales pentru paginile de destinație, este destul de comun 323 00:16:02,160 --> 00:16:05,310 pentru a avea pur și simplu o pagină foarte lungă unde utilizatorul 324 00:16:05,310 --> 00:16:07,220 pur și simplu continuă să deruleze. 325 00:16:07,220 --> 00:16:09,733 Dar din nou, navigarea poate fi totuși utilă acolo. 326 00:16:10,600 --> 00:16:11,640 Bine. 327 00:16:11,640 --> 00:16:14,690 Deci, îndemnul la acțiune aici, amintiți-vă, 328 00:16:14,690 --> 00:16:17,859 este de obicei ultima secțiune înainte de subsol. 329 00:16:17,859 --> 00:16:22,627 Deci, haideți să o mutam din nou în jos, folosind „opțiune” și „jos”. 330 00:16:22,627 --> 00:16:26,257 Deci avem „Footer” și „call to action”. 331 00:16:27,200 --> 00:16:31,350 Secțiunea „prezentat în”, acea parte mică cu sigle, 332 00:16:31,350 --> 00:16:34,400 este de obicei întotdeauna imediat după „erou”. 333 00:16:34,400 --> 00:16:36,700 Sau uneori, aceste sigle sunt chiar plasate 334 00:16:36,700 --> 00:16:39,180 direct în secțiunea „Erou”. 335 00:16:39,180 --> 00:16:41,410 Dar pentru a face totul mai simplu, îl vom pune pur și simplu 336 00:16:41,410 --> 00:16:43,290 imediat după „Eroul”. 337 00:16:43,290 --> 00:16:45,900 Și din nou, puteți vedea câteva exemple în acest sens 338 00:16:45,900 --> 00:16:48,130 în inspirația pe care ți-am oferit-o 339 00:16:48,130 --> 00:16:51,450 în prelegerea despre machete. Bine? 340 00:16:51,450 --> 00:16:54,150 Deci, asta este în secțiunea anterioară. 341 00:16:54,150 --> 00:16:57,800 În continuare, aici, în aceste „Diete” și „Mâncare”, 342 00:16:57,800 --> 00:16:59,233 hai să urcăm din nou acolo. 343 00:17:00,530 --> 00:17:01,363 Deci, 344 00:17:02,560 --> 00:17:04,130 ah, da, chiar aici. 345 00:17:04,130 --> 00:17:06,710 Deci, acesta de aici este doar ca 346 00:17:06,710 --> 00:17:09,050 o listă a acestor diete diferite. 347 00:17:09,050 --> 00:17:10,960 Și așa, nu cred că asta merită 348 00:17:10,960 --> 00:17:12,223 o secțiune în sine. 349 00:17:13,100 --> 00:17:16,600 Deci, în schimb, aș spune că putem include acest lucru aici 350 00:17:16,600 --> 00:17:19,140 în secțiunea probelor de mese 351 00:17:19,140 --> 00:17:21,870 pentru că aici avem doar două mese. 352 00:17:21,870 --> 00:17:25,110 Și așa, îmi pot imagina că am putea pune aceste două mese 353 00:17:25,110 --> 00:17:28,234 unul lângă altul și apoi, pe lângă asta, 354 00:17:28,234 --> 00:17:32,740 așa că, pe lângă acestea două, am putea pur și simplu să afișăm această listă. 355 00:17:32,740 --> 00:17:35,377 Deci asta mi se pare destul de logic. 356 00:17:35,377 --> 00:17:38,913 Și așa, hai să le unim pe acești doi împreună. 357 00:17:41,040 --> 00:17:42,073 Deci, „mese” 358 00:17:43,040 --> 00:17:45,707 și „lista de diete”. 359 00:17:47,100 --> 00:17:48,650 Bine. 360 00:17:48,650 --> 00:17:50,640 Acum, un alt model pe care îl veți vedea 361 00:17:50,640 --> 00:17:53,670 în paginile de destinație moderne este că prețul 362 00:17:53,670 --> 00:17:57,060 este, de asemenea, destul de jos pe pagină. 363 00:17:57,060 --> 00:18:01,480 Deci, de multe ori, vine chiar înainte de „chemarea la acțiune”. 364 00:18:01,480 --> 00:18:04,060 Deci, hai să-l mutăm acolo jos. 365 00:18:04,060 --> 00:18:05,200 În regulă. 366 00:18:05,200 --> 00:18:08,645 Și așa, acum încet, ordinea secțiunilor de aici 367 00:18:08,645 --> 00:18:11,810 începe să aibă un pic mai logic. 368 00:18:11,810 --> 00:18:14,090 Și, de asemenea, începe să fie mai aliniat 369 00:18:14,090 --> 00:18:17,300 cu ceea ce vedem în paginile de destinație moderne. 370 00:18:17,300 --> 00:18:20,550 Și să te învețe asta este de fapt un alt obiectiv 371 00:18:20,550 --> 00:18:22,490 a acestui curs. 372 00:18:22,490 --> 00:18:24,560 Deci, asta este foarte frumos aici. 373 00:18:24,560 --> 00:18:27,400 Mă gândesc împreună, gândindu-mă la 374 00:18:27,400 --> 00:18:29,140 ordinea secțiunilor de aici 375 00:18:29,140 --> 00:18:31,020 și cum ne putem aranja conținutul 376 00:18:31,020 --> 00:18:33,580 într-un mod logic și modern. 377 00:18:33,580 --> 00:18:38,580 Dar oricum, aici avem secțiunea „Mărturii”, nu? 378 00:18:40,210 --> 00:18:42,713 Și din nou, nu există prea mult conținut aici, 379 00:18:43,680 --> 00:18:46,300 deci practic sunt aceste patru mărturii aici 380 00:18:46,300 --> 00:18:47,693 cu niste poze. 381 00:18:48,650 --> 00:18:50,330 Deci, 382 00:18:50,330 --> 00:18:53,130 Ei bine, aici avem multe dintre aceste fotografii ale clienților 383 00:18:53,130 --> 00:18:56,433 și apoi, pentru galerie, avem aceste 12. 384 00:18:57,270 --> 00:19:00,080 Deci, acesta este acesta și apoi, alți 11 385 00:19:00,080 --> 00:19:02,140 și toate sunt pătrate. 386 00:19:02,140 --> 00:19:04,210 Deci, ne vom dori un fel de galerie. 387 00:19:04,210 --> 00:19:07,770 Și din nou, de fapt, ne-am inspirat în acest sens 388 00:19:07,770 --> 00:19:09,890 într-una din secțiunile anterioare. 389 00:19:09,890 --> 00:19:12,310 Deci, de fapt, cred, în secțiunea anterioară, 390 00:19:12,310 --> 00:19:14,790 în prelegerea despre componente. 391 00:19:14,790 --> 00:19:17,310 Acum, scopul acestei galerii foto aici 392 00:19:17,310 --> 00:19:21,110 va arăta utilizatorului cât de delicioasă arată mâncarea. 393 00:19:21,110 --> 00:19:24,460 Și așa, va încerca cu adevărat să facă utilizatorul 394 00:19:24,460 --> 00:19:26,530 înscrieți-vă pentru abonament. 395 00:19:26,530 --> 00:19:30,340 Și același lucru se poate spune despre aceste mărturii. 396 00:19:30,340 --> 00:19:33,650 Deci, aceste mărturii sunt toate despre dovezi sociale. 397 00:19:33,650 --> 00:19:35,960 Și astfel, ei trebuie să arate utilizatorului 398 00:19:35,960 --> 00:19:38,710 că alți utilizatori și-au cumpărat deja un abonament 399 00:19:38,710 --> 00:19:40,520 si ca merita. 400 00:19:40,520 --> 00:19:44,400 Și din nou, acesta este un pic despre vânzare. 401 00:19:44,400 --> 00:19:48,510 Și așa, gândirea noastră că am putea pune mărturiile 402 00:19:48,510 --> 00:19:51,940 iar galeria cam unul lângă altul. 403 00:19:51,940 --> 00:19:53,790 Deci, avem pe de o parte, 404 00:19:53,790 --> 00:19:55,700 toate aceste mărturii frumoase 405 00:19:55,700 --> 00:19:58,860 care va încerca cu adevărat să-l împingă pe utilizator peste margine 406 00:19:58,860 --> 00:20:00,260 de înscriere. 407 00:20:00,260 --> 00:20:04,420 Și apoi, galeria de aici poate întări cu adevărat acest lucru 408 00:20:04,420 --> 00:20:06,660 și conduci acel punct acasă. 409 00:20:06,660 --> 00:20:09,390 Deci, să le punem una lângă alta, 410 00:20:09,390 --> 00:20:11,763 pentru că cred că poate fi destul de puternic. 411 00:20:13,400 --> 00:20:16,334 Deci, o secțiune va fi „Galerie plus...” 412 00:20:16,334 --> 00:20:20,907 Sau de fapt, „Mărturii plus galerie”. 413 00:20:22,410 --> 00:20:23,610 Bine. 414 00:20:23,610 --> 00:20:25,670 Și aproape am terminat aici. 415 00:20:25,670 --> 00:20:29,010 Mai este un lucru pe care vreau să-ți arăt. 416 00:20:29,010 --> 00:20:32,140 Așadar, aici, în acest „Cum funcționează Omnifood”, 417 00:20:32,140 --> 00:20:35,690 avem aceste imagini ale aplicației. 418 00:20:35,690 --> 00:20:40,270 Deci avem acestea, aceste trei ecrane de aplicații diferite. 419 00:20:40,270 --> 00:20:41,900 Deci, care arată așa, 420 00:20:41,900 --> 00:20:46,220 care este din aplicarea Omnifood pe care ne-au dat-o. 421 00:20:46,220 --> 00:20:48,620 Și astfel, acest lucru va fi de mare ajutor pentru a ne arăta 422 00:20:48,620 --> 00:20:51,120 cum funcționează de fapt Omnifood. 423 00:20:51,120 --> 00:20:52,730 Deci exact aici, 424 00:20:52,730 --> 00:20:55,700 acești trei pași pe care îi avem aici. 425 00:20:55,700 --> 00:20:58,550 Și citind acești trei pași aici, 426 00:20:58,550 --> 00:21:01,460 Cred că această secțiune chiar dă 427 00:21:01,460 --> 00:21:04,580 o impresie foarte bună despre ce este Omnifood 428 00:21:04,580 --> 00:21:05,930 și cum funcționează. 429 00:21:05,930 --> 00:21:08,670 Deci, poate arăta utilizatorului nu doar cum funcționează, 430 00:21:08,670 --> 00:21:11,577 dar și despre ce înseamnă Omnifood. 431 00:21:11,577 --> 00:21:14,340 Și așa, cred că acesta este de fapt o modalitate mai bună 432 00:21:14,340 --> 00:21:16,100 de deschidere a site-ului web 433 00:21:16,100 --> 00:21:18,400 decât să enumerați pur și simplu aceste caracteristici aici, 434 00:21:18,400 --> 00:21:21,260 ceea ce este ceva ce fac multe site-uri web. 435 00:21:21,260 --> 00:21:23,110 Dar acum, din ce în ce mai mult, 436 00:21:23,110 --> 00:21:27,270 vedem că acest lucru nu mai este cazul în multe modele. 437 00:21:27,270 --> 00:21:28,760 Deci, acum câțiva ani, 438 00:21:28,760 --> 00:21:31,200 multe pagini de destinație ar începe, cum ar fi, 439 00:21:31,200 --> 00:21:35,040 cu aceste patru coloane și apoi să aibă un blog de caracteristici 440 00:21:35,040 --> 00:21:36,840 pentru fiecare dintre aceste caracteristici, 441 00:21:36,840 --> 00:21:38,630 dar asta pare un pic plictisitor. 442 00:21:38,630 --> 00:21:42,820 Și, de asemenea, este mai ușor să scanezi pur și simplu acești trei pași aici, 443 00:21:42,820 --> 00:21:45,890 decât să citești toate aceste caracteristici, nu? 444 00:21:45,890 --> 00:21:48,460 Și, de asemenea, dacă ne uităm la conținutul de aici, 445 00:21:48,460 --> 00:21:51,050 atunci de fapt asta nu se explică cu adevărat. 446 00:21:51,050 --> 00:21:54,780 Și nu descrie cu adevărat despre ce este Omnifood. 447 00:21:54,780 --> 00:21:57,090 Și așa, cred că asta este puțin 448 00:21:57,090 --> 00:21:59,400 mai multe informații secundare. 449 00:21:59,400 --> 00:22:03,130 De genul „Nu mai găti niciodată”. Bine, asta este destul de important, 450 00:22:03,130 --> 00:22:05,440 dar apoi, lucruri precum „local” și „organic” 451 00:22:05,440 --> 00:22:07,600 și că nu produc „deșeuri” 452 00:22:07,600 --> 00:22:09,630 și că poți să faci o pauză oricând. 453 00:22:09,630 --> 00:22:12,410 Aceasta este mai mult, cred, informații secundare. 454 00:22:12,410 --> 00:22:16,730 Nu este atât de important să fii, ca, în partea de sus a paginii. 455 00:22:16,730 --> 00:22:20,240 Și așa, aș deschide pagina cu această secțiune aici 456 00:22:20,240 --> 00:22:23,840 despre cum funcționează Omnifood și apoi mutați-l în jos. 457 00:22:23,840 --> 00:22:25,030 În regulă? 458 00:22:25,030 --> 00:22:28,820 Dar, desigur, aceasta este doar alegerea mea personală 459 00:22:28,820 --> 00:22:32,920 și ar fi foarte bine să o faci în orice mod diferit. 460 00:22:32,920 --> 00:22:35,600 Deci, evident, toate acestea sunt puțin bazate 461 00:22:35,600 --> 00:22:39,163 pe propria părtinire și gusturile mele personale, 462 00:22:39,163 --> 00:22:43,003 dar tot cred că acestea sunt alegeri sensibile. 463 00:22:43,003 --> 00:22:45,100 Și așa, ce voi face aici 464 00:22:45,100 --> 00:22:48,547 este de a muta „Funcțiile” de fapt sub „Preț”. 465 00:22:49,870 --> 00:22:53,869 Deci, avem atunci un fel de secțiune care poate, 466 00:22:53,869 --> 00:22:57,090 în timp ce putem adăuga chiar și „Prețul” cu „Features” 467 00:22:57,090 --> 00:22:58,763 ca împreună într-o singură secțiune. 468 00:23:00,130 --> 00:23:03,130 Deci, putem avea aceste două tabele de prețuri 469 00:23:03,130 --> 00:23:05,230 și apoi, mai jos, putem avea pur și simplu 470 00:23:05,230 --> 00:23:08,120 aceste patru caracteristici, care vor informa apoi utilizatorul 471 00:23:08,120 --> 00:23:11,000 chiar mai bine, la ce se înscriu. 472 00:23:11,000 --> 00:23:13,929 În cazul în care sunt interesați, cel puțin. 473 00:23:13,929 --> 00:23:16,140 Bine. 474 00:23:16,140 --> 00:23:20,223 Și astfel, cu aceasta, ajungem cu această listă de secțiuni. 475 00:23:21,130 --> 00:23:23,170 „Navigația” nu este chiar o secțiune, 476 00:23:23,170 --> 00:23:25,460 dar va fi primul lucru de pe pagină, 477 00:23:25,460 --> 00:23:27,063 împreună cu sigla. 478 00:23:28,526 --> 00:23:29,720 Deci, asta este destul de comun. 479 00:23:29,720 --> 00:23:31,053 Apoi, secțiunea „Erou”, 480 00:23:32,006 --> 00:23:34,290 apoi, acea mică secțiune doar cu logo-urile, 481 00:23:34,290 --> 00:23:36,870 apoi, acea secțiune frumoasă „Cum funcționează”, 482 00:23:36,870 --> 00:23:39,250 care contine o multime de informatii utile 483 00:23:39,250 --> 00:23:43,690 despre cum funcționează Omnifood și chiar despre ce este vorba. 484 00:23:43,690 --> 00:23:45,550 Apoi, putem deja arăta utilizatorului 485 00:23:45,550 --> 00:23:49,177 unele dintre mesele posibile în cazul în care se înscriu. 486 00:23:49,177 --> 00:23:53,860 Și apoi, de aici înainte, încercăm să vindem produsul. 487 00:23:53,860 --> 00:23:57,880 Deci, aici, chiar începem să ajungem în modul de vânzare. 488 00:23:57,880 --> 00:24:01,030 Deci, începem să avem câteva mărturii și galerie 489 00:24:01,030 --> 00:24:02,960 pentru a convinge cu adevărat utilizatorul. 490 00:24:02,960 --> 00:24:05,050 Apoi, le arătăm cât costă 491 00:24:05,050 --> 00:24:07,960 și caracteristicile produsului. 492 00:24:07,960 --> 00:24:10,170 Și, în sfârșit, aici, în apelul la acțiune, 493 00:24:10,170 --> 00:24:11,920 vrem să le înscriem. 494 00:24:11,920 --> 00:24:12,920 Bine? 495 00:24:12,920 --> 00:24:15,800 Deci, sper că acest raționament a avut sens pentru tine 496 00:24:15,800 --> 00:24:17,470 si te va ajuta si pe tine 497 00:24:17,470 --> 00:24:20,175 poate un motiv despre ordinea propriilor secțiuni 498 00:24:20,175 --> 00:24:24,590 odată ce începeți să vă construiți propriile site-uri web la un moment dat. 499 00:24:24,590 --> 00:24:25,423 Frumos. 500 00:24:25,423 --> 00:24:28,570 Deci, cu acest lucru în loc, putem începe de fapt să schițăm 501 00:24:28,570 --> 00:24:31,670 unele dintre aceste sectoare în prelegerea următoare. 502 00:24:31,670 --> 00:24:33,870 Deci, sper că ne vedem acolo în curând.